<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" v-model="address.name" placeholder-class="line" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="number" v-model="address.phone" placeholder-class="line" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input
					disabled
					type="text"
					placeholder-class="line"
					v-model="region"
					placeholder="省市区县、乡镇等"
				/>
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<!-- <textarea type="text" :auto-height="true" placeholder="街道、楼牌等" /> -->
				<textarea v-model="address.street" placeholder="街道、楼牌等" @input="textareaInput" />
			</view>
		</view>
		<u-picker mode="region" ref="uPicker" v-model="show" @confirm="checkRegion" />
		<button type="default" class="btn" @click="addSite">确定</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			region: '',
			address: {
				name: '',
				phone: '',
				region: {},
				street: ''
			}
		};
	},
	methods: {
		setDefault() {},
		showRegionPicker() {
			this.show = true;
		},
		checkRegion(e) {
			this.region = `${e.province.label}${e.city.label}${e.area.label}`;
			this.address.region = {
				area: e.area.label,
				city: e.city.label,
				province: e.province.label
			};
		},
		textareaInput(e) {
			console.log(e.detail.value);
			this.address.street = e.detail.value
		},
		addSite() {
			console.log(this.address)
			let {name, phone, region, street} = this.address
			if (name == '' || phone == '' || region.area == '' || street == '') {
				uni.showToast({
					title: '请填写完整资料',
					icon: 'none'
				})
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}

		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				// height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
.btn {
	margin-top: 120upx;
	width: 92%;
	height: 60upx;
	border-radius: 8upx;
	font-size: 32upx;
	line-height: 60upx;
	color: #ffffff;
	background: #373846;
	border: none;
	&::after {
		border: none;
	}
}
</style>
